<template>
  <view class="page">
    <view class="logo">
      <image src="../../static/logo.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" v-model="form.phone" maxlength="11" placeholder="手机号">
        <view class="more">

        </view>
      </view>
      <view class="info">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo"  :class="{phone_right: phoneRight}" @tap="getVerifyCode()" v-if="!countDown">获取验证码</text>
          <text class="mo" v-else>{{countDown}}秒后重试</text>
        </view>
      </view>
      <view class="info">
        <input :password='!isPassword' maxlength="26" v-model="form.password" placeholder="请输入密码">
        <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
        <text>注册</text>
      </view>
    </view>
    <!-- 操作 -->
    <view class="operation">
      <text></text>
      <text @click="onLogin">已有账号?登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPassword: false,
      isRegister: false,
      // 表单
	  countDown:0,
      form:{
        phone: '',//手机号
        code: '',//验证码
        password: '',//密码
      },
    };
  },
  methods:{
    onLogin(){
      uni.redirectTo({
        url: '/pages/login/login'
      })
    },
	//获取验证码
	getVerifyCode(){
	    if(this.phoneRight) {
		   this.countDown = 60;
		   this.intervalId = setInterval(() => {
			 this.countDown--;
			 // 判断
			 if (this.countDown === 0) {
			   clearInterval(this.intervalId);
			 }
		   }, 1000);
		   //发送请求
		   this.$api.users.getSend_code().then((res) => {
				console.log(res)
				uni.showToast({
				    title:'验证码' +' '+res.data.message,
				    duration: 5000,
					icon:'none'
				});
		   }).catch((err) => {
				console.log('request fail', err);
		   })
	    }
	},
    /**
     * 注册点击
     */
    onRegister(){
		let from = this.form;
		if(!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(from.phone)){
			uni.showToast({
			    title: '请输入正确的手机号码',
			    duration: 2000,
				icon:"none"
			});
		}
		this.$api.users.addRegister({
			data:JSON.stringify(from)
		}).then((res) => {
			console.log(res)
			uni.showToast({
			    title: res.data.message,
			    duration: 2000,
				icon:"none"
			});
		}).catch((err) => {
			console.log('request fail', err);
		})
    }
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        if(newValue.phone && newValue.code && newValue.password){
          this.isRegister = true;
        }else{
          this.isRegister = false;
        }
      },
      deep: true
    }
  },
  computed: {
	// 验证手机号是否合理
	phoneRight() {
	  return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)
	}
  },
}
</script>

<style scoped lang="scss">
@import 'register.scss';
</style>
